<template>
  <el-row type="flex" justify="center">
    <div class="book-slide" style="width: 1000px;height: 300px;margin-top: 10px">
      <div class="book">
        <el-carousel  :interval="4000" type="card" style="background-color: #F2F5F7FF">
          <el-carousel-item v-for="h in 5" :key="h" style="border-radius: 10px;width: 500px;">
            <div class="book-cell">
              <div class="book-img">
                <img src="https://images-na.ssl-images-amazon.com/images/I/81WcnNQ-TBL.jpg" alt="" class="book-photo">
              </div>
              <div class="book-content">
                <div class="book-title">BIG MAGIC</div>
                <div class="book-author">by Elizabeth Gilbert</div>
                <div class="rate">
                  <fieldset class="rating">
                    <input type="checkbox" id="star5" name="rating" value="5" />
                    <label class="full" for="star5"></label>
                    <input type="checkbox" id="star4" name="rating" value="4" />
                    <label class="full" for="star4"></label>
                    <input type="checkbox" id="star3" name="rating" value="3" />
                    <label class="full" for="star3"></label>
                    <input type="checkbox" id="star2" name="rating" value="2" />
                    <label class="full" for="star2"></label>
                    <input type="checkbox" id="star1" name="rating" value="1" />
                    <label class="full" for="star1"></label>
                  </fieldset>
                  <span class="book-voters">1.987 voters</span>
                </div>
                <div class="book-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
                              <div class="book-see">See The Book</div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>

      </div>
    </div>
  </el-row>

</template>

<script>
export default {
  name: "HomeSlide",
  data(){
    return{

    }
  }
}
</script>

<style scoped>
.book-cell{
  width: 500px;
  height: 300px;
  border-radius: 10px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 500px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
